<template>
  <t-dialog :header="`${header}【当前已勾选${selectedRowKeys.concat(selectedRowKeys2).length}】`" @confirm="onSubmit" :confirmBtn="{
        content: loading?'提交中...':'确认',
        theme: 'primary',
        loading: loading,
      }" :visible.sync="visible" :onClose="closeDialog"     :closeOnOverlayClick="false"
            width="80%"
            top="5%">
    <div style="height: 65vh">
    <div style="display: flex;font-weight: bold;justify-content: center;font-size: 30px;padding: 30px">
      专家列表
    </div>
    <t-form ref="form" :data="queryParams" label-width="80" @submit="()=>{this.pagination.current=1;this.queryParams.pageNum=1;this.getList()}" @reset="()=>{this.pagination.current=1;this.queryParams.pageNum=1;this.getList()}">
      <t-row style="border-bottom: 1px solid #E5E6EB;margin-bottom: 10px">
        <t-col :span="11" class="query-form-inline">
          <t-form-item label="专家姓名" name="nickName">
            <t-input
              v-model="queryParams.nickName"
              clearable
              placeholder="请输入专家姓名"
              style="width: 240px"
            />
          </t-form-item>
          <t-form-item label="组别" name="recommendMajor">
            <t-select
              clearable
              style="width: 240px"
              :options="dict.type.recommend_major"
              placeholder="选择组别"
              v-model="queryParams.recommendMajor"
            >
            </t-select>
          </t-form-item>
          <t-form-item label="所在单位" name="departmentName">
            <!-- <t-tree-select style="width:240px"  clearable filterable :treeProps="{keys: {value: 'id'}}" v-model="queryParams.departmentId"
                           :data="deptOptions" placeholder="选择单位"></t-tree-select> -->
            <t-input v-model="queryParams.departmentName" clearable placeholder="请输入" style="width: 240px" />
          </t-form-item>
          <t-form-item label="手机号" name="phonenumber">
            <t-input v-model="queryParams.phonenumber" clearable placeholder="请输入" style="width: 240px" />
          </t-form-item>
          <t-form-item label="专业" name="majorName">
            <t-input
              v-model="queryParams.majorName"
              clearable
              placeholder="请输入"
              style="width: 240px"
            />
          </t-form-item>
          <t-form-item label="现从事专业" name="majorNowName">
            <t-input
              v-model="queryParams.majorNowName"
              clearable
              placeholder="请输入"
              style="width: 240px"
            />
          </t-form-item>
          <t-form-item label="职务" name="duty">
            <t-input
              v-model="queryParams.duty"
              clearable
              placeholder="请输入专家职务"
              style="width: 240px"
            />
          </t-form-item>
          <t-form-item label="职称" name="profTit">
            <t-select clearable style="width: 240px" :options="dictTypes.prof_tit" placeholder="选择职称"
                      v-model="queryParams.profTit">
            </t-select>
          </t-form-item>
          <t-form-item label="学历" name="education">
            <t-select clearable style="width: 240px" :options="dict.type.education" placeholder="选择学历"
                      v-model="queryParams.education">
            </t-select>
          </t-form-item>
          <t-form-item label="学位" name="degree">
            <t-select clearable style="width: 240px" :options="dict.type.degree" placeholder="选择学位"
                      v-model="queryParams.degree">
            </t-select>
          </t-form-item>
        </t-col>
        <t-col :span="1" class="operation-container">
          <t-button theme="primary" type="submit"> 查询</t-button>
          <t-button theme="default" variant="outline" type="reset">重置</t-button>
        </t-col>
      </t-row>
    </t-form>
    <t-table row-key="id" :columns="columns"
             :pagination="pagination" :loading="dataLoading"
             :data="data" :selected-row-keys="selectedRowKeys" @select-change="(val)=>{selectedRowKeys=val}">
      <template #[`sysUser.nickName`]="{ row }">
        <t-link  @click="dialog.objId=row.id;dialog.idCard=row.sysUser.idCard;dialog.header=row.sysUser?.nickName;dialog.open_expert_detail=true" hover="color" theme="primary"> {{ row.sysUser?.nickName }}</t-link>
      </template>
      <template #classification="{ row }">
        {{ row.classification | filterByDict(dict.type.classification) }}
      </template>
      <template #[`sysUser.education`]="{ row }">
        {{ row.sysUser?.education | filterByDict(dict.type.education) }}/{{ row.sysUser?.degree | filterByDict(dict.type.degree) }}
      </template>
<!--      <template #[`sysUser.degree`]="{ row }">-->
<!--        {{ row.sysUser?.degree | filterByDict(dict.type.degree) }}-->
<!--      </template>-->
      <template #[`sysUser.duty`]="{ row }">
        <div v-if="['99999',''].includes(row.sysUser?.profTit)">
          {{ row.sysUser?.duty }}
        </div>
        <div v-else>
          {{ row.sysUser?.duty }}/{{ row.sysUser?.profTit | filterByDict(dict.type.prof_tit) }}
        </div>
      </template>
    </t-table>
      <expert-detail-dialog :header="dialog.header" :obj-id="dialog.objId" :id-card="dialog.idCard" :visible.sync="dialog.open_expert_detail"
                            v-if="dialog.open_expert_detail"></expert-detail-dialog>
    </div>
  </t-dialog>
</template>

<script>
import {getDictList} from "@/api/system/dict/data";
import ExpertDetailDialog from "../../../zjk/expert/components/expert-detail-dialog.vue";
export default {
  name: "select-project",
  dicts: ['prof_tit', 'education', 'degree','recommend_major'],
  components:{
    ExpertDetailDialog
  },
  props: {
    header: {
      type: String,
      default: ''
    },
    formData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      dialog:{
        objId: null,
        header: '',
        open_expert_detail: false,
        idCard: '',
      },
      dictTypes: {},
      data2: [],
      deptOptions: [],
      dataLoading2: false,
      selectedRowKeys2: [],
      selectedRowKeys: [],
      sendPorjectInfo: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dateRange: [],
        recommendMajor: '',
        nickName: '',
        majorName: '',
        majorNowName: '',
        duty:'',
        profTit: '',
        education: '',
        degree: '',
      },
      dataLoading: false,
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        showPageSize: true,
        pageSizeOptions: [10, 20, 30, 50],
        showFirstAndLastPageBtn: false,
        onChange: (pageInfo) => {
          Object.assign(this.pagination,pageInfo)
          this.queryParams.pageNum = pageInfo.current || 1;
          this.queryParams.pageSize = pageInfo.pageSize;
          this.getList()
        },
      },
      data: [],
      columns: [
        {
          colKey: 'row-select',
          type: 'multiple',
          className: 'demo-multiple-select-cell',
          width: 64,
        },
        // {
        //   colKey: "recommendMajor",
        //   title: "类型",
        //   align: "center",
        //   width:100
        // },
        {
          colKey: "sysUser.nickName",
          title: "专家姓名",
          align: "center",
        },
        {
          colKey: "age",
          title: "年龄",
          align: "center",
          width: 90
        },
        // {
        //   colKey: "phoneNumber",
        //   title: "联系方式",
        //   align: "center"
        // },
        {
          colKey: "sysUser.dept.deptName",
          title: "所在单位",
          align: "center",
          width: 180
        },
        {
          colKey: "sysUser.phonenumber",
          title: "手机号",
          align: "center",
          width: 130
        },
        {
          colKey: "recommendMajorName",
          title: "组别",
          align: "center",
        },
        // {
        //   colKey: "category",
        //   title: "分类",
        //   align: "center"
        // },
        {
          colKey: "sysUser.majorName",
          title: "专业",
          align: "center",
          // ellipsis: true
        },
        {
          colKey: "sysUser.majorNowName",
          title: "现从事专业",
          align: "center",
          // ellipsis: true
        },
        // {
        //   colKey: "classification",
        //   title: "分级",
        //   align: "center"
        // },
        {
          colKey: "sysUser.duty",
          title: "职务/职称",
          align: "center",
        },
        {
          colKey: "sysUser.education",
          title: "学历/学位",
          align: "center",
          // ellipsis: true
        },
        // {
        //   colKey: "sysUser.degree",
        //   title: "学位",
        //   align: "center",
        //   ellipsis: true
        // },
        {
          colKey: "joinReviewTimes",
          title: "参与评审次数",
          align: "center",
          ellipsis: true
        },
        {
          colKey: "joinProjectTimes",
          title: "参与项目次数",
          align: "center",
          ellipsis: true
        },
        // { colKey: 'expertName', title: '专家名称' },
        // { colKey: 'departmentName', title: '单位' },
        // { colKey: 'majorIn', title: '专业' }
      ],
      visible: true,
      loading: false,
    }
  },
  watch: {
    formData: {
      immediate: true,
      handler(val) {
        if (val.id) {
          this.getList();
          // this.getSmartList();
        }
      }
    }
  },
  created(){
    this.getDeptTreeSelect();
    this.getDataTypes();
  },
  methods: {
    getDataTypes() {
      getDictList(["prof_tit"]).then(response => {
        this.dictTypes = response.data;
        this.dictTypes.prof_tit = this.dictTypes.prof_tit.filter(val => !['初级', '中级'].includes(val.label))
      }).catch((e) => {
        this.$message.error(e.toString());
      })
    },
    getDeptTreeSelect(){
      this.$api.system.dept.treeSelectAllIn().then(response => {
        this.deptOptions = response.data;
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    // getSmartList() {
    //   this.dataLoading2 = true;
    //   this.$api.bzh.review.teamSmartExpertList({
    //     reviewType: this.formData.reviewType,
    //     teamId: this.formData.id
    //   }).then((res) => {
    //     this.data2 = res.data;
    //     this.dataLoading2 = false;
    //   }).catch((e) => {
    //     this.dataLoading2 = false
    //     this.$message.error(e.toString());
    //   });
    // },
    getList() {
      this.dataLoading = true;
      this.queryParams.reviewType = this.formData.reviewType;
      this.queryParams.teamId = this.formData.id;
      this.$api.bzh.review.teamExpertList(this.queryParams).then((res) => {
        this.data = res.data;
        this.pagination.total = res.data.length;
        this.dataLoading = false;
      }).catch((e) => {
        this.dataLoading = false
        this.$message.error(e.toString());
      });
    },
    onSubmit() {
      if (this.selectedRowKeys.concat(this.selectedRowKeys2).length === 0) {
        this.$message.error('请选择专家')
        return false;
      }
      const expertsId = this.selectedRowKeys.concat(this.selectedRowKeys2).map(val => ({
        teamId: this.formData.id,
        reviewType: this.formData.reviewType,
        expertsId: val
      }))
      this.loading = true;
      this.$api.bzh.review.teamExpertAddList(expertsId).then((res) => {
        // 初始化
        this.$message.success("选择成功");
        this.$emit("reload");
        this.$emit("update:visible", false);
        this.loading = false;
      }).catch((e) => {
        this.loading = false;
        this.$message.error(e.toString());
      });
    },
    closeDialog() {
      this.$emit("update:visible", false);
    },

  }
}
</script>

<style scoped>
.overlay-options {
  display: inline-block;
  font-size: 20px;
}
</style>
